<template>
  <div class="main">
    <a-breadcrumb separator="">
      <template #separator><span style="color: red">></span></template>

      <a-breadcrumb-item>
        <home-outlined />
        Home</a-breadcrumb-item>
        <a-breadcrumb-separator>:</a-breadcrumb-separator>
      <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
      <a-breadcrumb-separator>/</a-breadcrumb-separator>
      <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
      <a-breadcrumb-separator>|</a-breadcrumb-separator>

      <a-breadcrumb-item><a-button type="primary">a</a-button></a-breadcrumb-item>
      <a-breadcrumb-item>
        <a>General</a>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="http://www.alipay.com/"
              >General</a>
            </a-menu-item>
            <a-menu-item>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="http://www.taobao.com/"
              >Layout</a>
            </a-menu-item>
            <a-menu-item>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="http://www.tmall.com/"
              >Navigation</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-breadcrumb-item>
    </a-breadcrumb>

  </div>
</template>

<script>
import { HomeOutlined } from '@ant-design/icons-vue'
export default {
  name: '',
  components: { HomeOutlined },
  data() {
    return {
    }
  },
  created() { },
  mounted() { },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
.main {
  padding: 30px;
}
</style>
